<template>
  <div class="economy">
    <h1>Lobby</h1>
    <div class="reception_img">
      <img src="@/assets/imgs/reception/top1.png" />
    </div>
    <h1>Media Center</h1>
    <div class="reception_img">
      <img src="@/assets/imgs/reception/top2.png" />
    </div>
    <div class="reception_footer">
      <p>Scan and subscribe Covestro Wechat Service Account</p>
      <p>Explore more material information</p>
      <div class="reception_footer_img">
        <img src="@/assets/imgs/reception/top3.png" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  computed: {},
  mounted () { },
  methods: {}
};
</script>

<style lang="scss" scoped>
.economy {
  max-width: 750px;
  margin: 10px auto;
  box-sizing: border-box;
  padding: 10px;
}
h1 {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 20px;
}

.reception_img {
  width: 100%;
  margin-bottom: 30px;
  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}

.reception_footer {
  text-align: center;
  margin: 0 auto;
  font-size: 20px;
  .reception_footer_img {
    width: 50%;
    margin: 0 auto;
    img {
      display: block;
      width: 100%;
    }
  }
}

@media (max-width: 414px) {
  h1 {
    font-size: 18px;
  }
  .reception_footer {
    font-size: 14px;
  }
}
</style>
